import { App, createApp } from "vue"
import ccLoadingUI from "./ui.vue"

// ccLoading.install = (app: App, options: any) => {
//     app.component(ccLoading.name, ccLoading)
// }

/**
 * 只为http请求创建的独立loading
 */
class CCLoading {
  private instance: any

  constructor() {}

  private init(): void {
    const app: App = createApp(ccLoadingUI)
    const DIV: DocumentFragment = document.createDocumentFragment()
    this.instance = app.mount(DIV)
    window.document.body.appendChild(this.instance.$el)
    this.hide()
    return this.instance
  }

  public show(): void {
    this.create()
    this.instance.$el.style.display = "block"
  }

  public hide(): void {
    this.instance.$el.style.display = "none"
  }

  public destroy(): void {
    const EL = window.document.body.querySelector("cc-loading-mask")
    if (EL) {
      window.document.body.removeChild(EL)
    }
    if (this.instance) {
      window.document.body.removeChild(this.instance.$el)
      this.instance = null
    }
  }

  public create(): void {
    this.destroy()
    this.init()
  }
}

export default CCLoading
